<template lang="pug">
.scene-logo
  .scene-logo-group(v-if="showGroup")
    .scene-logo-group-item(:style="styleObjectDefault")
      span {{getTitle}}
  .scene-logo-logo
    img(:src="getLogoImage")
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      styleObjectDefault: {
        background: 'url(static/images/z1.png) no-repeat 100% 100%',
      },
    }
  },
  computed: {
    ...mapGetters(['panoInfo', 'sceneList']),
    showGroup() {
      if ((this.panoInfo && this.panoInfo.templatetype !=11) || (this.panoInfo && this.panoInfo.templatetype == 11 && !this.panoInfo.is_show_aerial)) {
        return false
      }
      return true
    },
    // 获取logo
    getLogoImage() {
      if (this.panoInfo) {
        return this.panoInfo.full_logo_url
      }
    },
    // 获取标题
    getTitle() {
      let title = ''
      let sceneId = this.$route.query.scene_id
      if (this.sceneList && this.sceneList.length > 0 && sceneId) {
        this.sceneList.map(item => {
          if (sceneId == item.scene_id) {
            title = item.title
          }
        })
      } else if (this.sceneList && this.sceneList.length > 0) {
        title = this.sceneList[0].title
      }
      return title
    },
  },
}
</script>

<style lang="stylus">
.scene-logo
  position absolute
  z-index 3
  top 40px
  left 0
  width 97%
  height 180px
  text-align right
  .scene-logo-group
    text-align right
    display inline-block
    width 80%
    vertical-align text-bottom
    height 180px
    .scene-logo-group-item
      float right
      width 30px
      font-size 16px
      height 180px
      margin-left 15px
      cursor pointer
      text-align center
      padding 0 13px 0 5px
      writing-mode vertical-rl
      writing-mode tb-rl
      overflow hidden
      span
        width 25px
        overflow hidden
        display inline-block
        height 100%
        word-wrap break-word
        word-break break-all
        writing-mode vertical-lr
        writing-mode tb-lr
    		letter-spacing 3px
      span.active
        color #ffffff
  .scene-logo-logo
    width 15%
    max-width 100px
    height 180px
    display inline-block
    margin-left 5%
    
    img
      width 100%
      max-width 100px
      height auto
      max-height 100px

@media screen and (min-width: 768px) {
  .scene-logo-logo {
    margin-left 30px !important
  }
}
</style>
